﻿@import "../../styles/mixins/btn";
@import "../../styles/mixins/vars";

.tabs {
    .tab-header {
        display: flex;
        border-bottom: solid 1px $color-border;

        > li {
            display: inline-block;
            padding: rem(10) rem(15);
            min-width: rem(50);
            text-align: center;
            margin-right: rem(5);
            border-radius: rem(5) rem(5) 0 0;
            border: 1px solid transparent;
            border-bottom: none;

            &:hover {
                background-color: #eff4f6;
                border-color: $color-border;
                cursor: pointer;
            }

            &.active {
                background: #00bca4;
                color: #fff;
            }
        }
    }

    .tab-content {
        .tab {
            display: none;

            &.active {
                display: block;
            }
        }
    }
}
